﻿<%@ Page Language="C#" AutoEventWireup="true" CodeFile="treeViewPage.aspx.cs" Inherits="TreeViewPage" %>

<%@ Register Assembly="DevExpress.Web.v14.1, Version=14.1.8.0, Culture=neutral, PublicKeyToken=b88d1754d700e49a" Namespace="DevExpress.Web.ASPxDocking" TagPrefix="dx" %>
<%@ Register Assembly="DevExpress.Web.v14.1" Namespace="DevExpress.Web.ASPxTreeView" TagPrefix="dx" %>
<%@ Register Assembly="DevExpress.XtraCharts.v14.1.Web" Namespace="DevExpress.XtraCharts.Web" TagPrefix="dxchartsui" %>
<%@ Register TagPrefix="dxcharts" Namespace="DevExpress.XtraCharts" Assembly="DevExpress.XtraCharts.v14.1" %>
<%@ Register TagPrefix="dx" Namespace="DevExpress.Web.ASPxPopupControl" Assembly="DevExpress.Web.v14.1" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title>页面测试</title>
        <meta charset="utf-8"/>
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
        <meta name="viewport" content="initial-scale=1.0,user-scalabe=no,width=device-width"/>

        <link rel="stylesheet" href="/css/ol.css" type="text/css"/>
        <link rel="stylesheet" href="/resources/bootstrap/css/bootstrap.min.css" type="text/css"/>
        <link rel="stylesheet" href="/resources/layout.css" type="text/css"/>
        <link rel="stylesheet" href="/resources/bootstrap/css/bootstrap-responsive.min.css" type="text/css"/>

        <style type="text/css">
            #layertree li > span {
                cursor: pointer;
            }

             .ol-popup {
                 display: none;
                 position: absolute;
                 background-color: white;
                 -moz-box-shadow: 0 1px 4px rgba(0,0,0,0.2);
                 -webkit-filter: drop-shadow(0 1px 4px rgba(0,0,0,0.2));
                 filter: drop-shadow(0 1px 4px rgba(0,0,0,0.2));
                 padding: 15px;
                 border-radius: 10px;
                 border: 1px solid #cccccc;
                 bottom: 12px;
                 left: -50px;
             }
            .ol-popup:after, .ol-popup:before {
                top: 100%;
                border: solid transparent;
                content: " ";
                height: 0;
                width: 0;
                position: absolute;
                pointer-events: none;
            }
            .ol-popup:after {
                border-top-color: white;
                border-width: 10px;
                left: 48px;
                margin-left: -10px;
            }
            .ol-popup:before {
                border-top-color: #cccccc;
                border-width: 11px;
                left: 48px;
                margin-left: -11px;
            }
            .ol-popup-closer {
                text-decoration: none;
                position: absolute;
                top: 2px;
                right: 8px;
            }
            .ol-popup-closer:after {
                content: "✖";
            }
        </style>

        <script src="/Scripts/ol.js" type="text/javascript"></script>
        <script src="/Scripts/jquery-2.1.1.js" type="text/javascript"></script>
        <script src="/Scripts/bootstrap.min.js" type="text/javascript"></script>
        <script src="/resources/example-behaviour.js" type="text/javascript"></script>

        <script type="text/javascript">
            // <![CDATA[

            function initSql() {
                $.ajax({
                    type: "POST",
                    url: "../WebService.asmx/InitMySql",
                    data: "{}",
                    contentType: "application/json",
                    dataType: "json",
                    async: true,
                    success: function (result) {
                        alert(result.d);
                    },
                    error: function (err) {
                        alert("错误:" + err);
                    }
                });
            }

            function getJsonData(sql) {
                var res;

                $.ajax({
                    type: "POST",
                    url: "../WebService.asmx/GetJsonData",
                    data: "{sql: '" + sql + "'}",
                    contentType: "application/json",
                    dataType: "json",
                    async: false,
                    success: function (result) {
                        alert(result.d);
                        res = eval('(' + result.d + ')');
                    },
                    error: function (err) {
                        alert("错误：" + err);
                    }
                });

                return res;
            }

            //设置为geojson文件后加载...
            function setGeoJson(sql) {
                var res;
                alert(sql);
                $.ajax({
                    type: "POST",
                    url: "../WebService.asmx/SetCellGeoJsonData",
                    data: "{}",
                    contentType: "application/json",
                    dataType: "json",
                    async: false,
                    success: function (result) {
                        //alert(result.d);
                        res = result.d;
                    },
                    error: function (result) {
                        //alert("错误：" + err);
                        res = "错误：" + result;
                    }
                });

                alert("JSON数据:"+res);

                return res;
            }

            var openLayermap = (function () {
                //地图实例
                var openmap = null;

                //地图div
                var mapElementId = "googlemap";//"Testmap";

                //弹出窗体
                function initialPopup() {
                    /**
                    * Elements that make up the popup.
                    */
                    var container = document.getElementById('popup');
                    var content = document.getElementById('popup-content');
                    var closer = document.getElementById('popup-closer');

                    /**
                     * Add a click handler to hide the popup.
                     * @return {boolean} Don't follow the href.
                     */
                    closer.onclick = function() {
                        container.style.display = 'none';
                        closer.blur();
                        return false;
                    };

                    /**
                     * Create an overlay to anchor the popup to the map.
                     */
                    var overlay = new ol.Overlay({
                        element: container
                    });

                    openmap.addOverlay(overlay);

                    /**
                    * Add a click handler to the map to render the popup.
                    */
                    openmap.on('click', function(evt) {


                        var coordinate = evt.coordinate;

                        var pixel = evt.pixel;

                        var feature = openmap.forEachFeatureAtPixel(pixel, function(feature, layer) {
                            return feature;
                        });

                        if (feature) {
                            var tempName = feature.get('name');
                            var tempId = feature.get('id');
                            var tempValue = feature.get('value');
                            content.innerHTML = '<p>name:' + tempName + '</p>' + '<p>LAC_CI:' + tempId + '</p>' + '<p>BCCH:' + tempValue + '</p>';

                            overlay.setPosition(coordinate);

                            container.style.display = 'block';

                        }

                        //else {

                        //    var hdms = ol.coordinate.toStringHDMS(ol.proj.transform(
                        //        coordinate, 'EPSG:3857', 'EPSG:4326'));
                        //    content.innerHTML = '<p>You clicked here:</p><code>' + hdms +
                        //        '</code>';
                        //}
                    });
                }

                //获取地图div
                function getMapElement() {
                    return document.getElementById(mapElementId);
                };

                //显示地图
                function showMap() {
                    if (!openmap) {
                        createMap();
                    }
                };

                function initalDragMap() {
                    //interactions: ol.interaction.defaults().extend([dragAndDropInteraction]),

                    var defaultStyle = {
                        'Point': [new ol.style.Style({
                            image: new ol.style.Circle({
                                fill: new ol.style.Fill({
                                    color: 'rgba(255,255,0,0.5)'
                                }),
                                radius: 5,
                                stroke: new ol.style.Stroke({
                                    color: '#ff0',
                                    width: 1
                                })
                            })
                        })],
                        'LineString': [new ol.style.Style({
                            stroke: new ol.style.Stroke({
                                color: '#f00',
                                width: 3
                            })
                        })],
                        'Polygon': [new ol.style.Style({
                            fill: new ol.style.Fill({
                                color: 'rgba(0,255,255,0.5)'
                            }),
                            stroke: new ol.style.Stroke({
                                color: '#0ff',
                                width: 1
                            })
                        })],
                        'MultiPoint': [new ol.style.Style({
                            image: new ol.style.Circle({
                                fill: new ol.style.Fill({
                                    color: 'rgba(255,0,255,0.5)'
                                }),
                                radius: 5,
                                stroke: new ol.style.Stroke({
                                    color: '#f0f',
                                    width: 1
                                })
                            })
                        })],
                        'MultiLineString': [new ol.style.Style({
                            stroke: new ol.style.Stroke({
                                color: '#0f0',
                                width: 3
                            })
                        })],
                        'MultiPolygon': [new ol.style.Style({
                            fill: new ol.style.Fill({
                                color: 'rgba(0,0,255,0.5)'
                            }),
                            stroke: new ol.style.Stroke({
                                color: '#00f',
                                width: 1
                            })
                        })]
                    };

                    var styleFunction = function (feature, resolution) {
                        var featureStyleFunction = feature.getStyleFunction();
                        if (featureStyleFunction) {
                            return featureStyleFunction.call(feature, resolution);
                        } else {
                            return defaultStyle[feature.getGeometry().getType()];
                        }
                    };

                    var dragAndDropInteraction = new ol.interaction.DragAndDrop({
                        formatConstructors: [
                          ol.format.GPX,
                          ol.format.GeoJSON,
                          ol.format.IGC,
                          ol.format.KML,
                          ol.format.TopoJSON
                        ]
                    });

                    dragAndDropInteraction.on('addfeatures', function (event) {
                        var vectorSource = new ol.source.Vector({
                            features: event.features,
                            projection: event.projection
                        });
                        openmap.getLayers().push(new ol.layer.Vector({
                            source: vectorSource,
                            style: styleFunction
                        }));
                        var view = openmap.getView();
                        view.fitExtent(
                            vectorSource.getExtent(), /** @type {ol.Size} */ (openmap.getSize()));
                    });

                };

                //创建地图
                function createMap() {

                    if (typeof ol === "undefined") return;

                    if (openmap)
                        openmap.Dispose();
                    
                    var layers = [
                        new ol.layer.Tile({
                            name:'baseLayer',
                            source: new ol.source.MapQuest({ layer: 'osm' })
                        })

                        //,

                        //new ol.layer.Tile({
                        //    source: new ol.source.TileWMS(({
                        //        url: 'http://10.141.132.183:50004/geoserver/wms',
                        //        params: { 'LAYERS': 'zhejiang', 'TILED': true },
                        //        serverType: 'geoserver'
                        //    }))
                        //})
                    ];

                    var mousePositionControl = new ol.control.MousePosition({
                        coordinateFormat: ol.coordinate.createStringXY(4),
                        projection: 'EPSG:4326',
                        //注释掉下面两行默认在地图内显示鼠标经过经纬度
                        /*      className: 'custom-mouse-position',
                         target: document.getElementById('info'),*/
                        undefinedHTML: '&nbsp;'
                    });


                    openmap = new ol.Map({
                        controls: ol.control.defaults({
                            attributionOptions: /** @type {olx.control.AttributionOptions} */ ({
                                collapsible: true
                            })
                        }).extend([
                            new ol.control.ScaleLine(),
                            mousePositionControl,
                            new ol.control.Rotate()
                        ]),
                        target: mapElementId,
                        layers: layers,
                        view: new ol.View({
                            center: ol.proj.transform([110.332, 20.0246], 'EPSG:4326', 'EPSG:3857'),
                            zoom: 10
                        })
                    });

                    resizeMap();

                    initialPopup();
                };

                //收起地图
                function collapseMap() {
                    if (typeof ol === "undefined") return;
                    //alert("Collapse");
                    getMapElement().style.height = 0;
                    getMapElement().style.width = 0;
                };

                //Resize窗体
                function resizeMap() {
                    var mapElement = getMapElement();
                    var mapElementParentNode = mapElement.parentNode.parentNode;
                    mapElement.style.width = "100%";
                    mapElement.style.height = mapElementParentNode.clientHeight + "px";
                    openmap.width = mapElement.clientWidth;
                    openmap.height = mapElementParentNode.clientHeight;
                    openmap.updateSize();
                };

                function drawGeoJsonLayer() {

                     var jsonFile = setGeoJson();

                     //alert(jsonFile);

                    /*     var image = new ol.style.Circle({
                             radius: 5,
                             fill: null,
                             stroke: new ol.style.Stroke({ color: 'red', width: 1 })
                         });*/

                    var image = new ol.style.Icon(/** @type {olx.style.IconOptions} */({
                        anchor: [0.5, 46],
                        anchorXUnits: 'fraction',
                        anchorYUnits: 'pixels',
                        opacity: 0.75,
                        src: 'Images/1.gif'
                    }));

                    var styles = {
                        'Point': [new ol.style.Style({
                            image: image
                        })],
                        'LineString': [new ol.style.Style({
                            stroke: new ol.style.Stroke({
                                color: 'green',
                                width: 1
                            })
                        })],
                        'MultiLineString': [new ol.style.Style({
                            stroke: new ol.style.Stroke({
                                color: 'green',
                                width: 1
                            })
                        })],
                        'MultiPoint': [new ol.style.Style({
                            image: image
                        })],
                        'MultiPolygon': [new ol.style.Style({
                            stroke: new ol.style.Stroke({
                                color: 'yellow',
                                width: 1
                            }),
                            fill: new ol.style.Fill({
                                color: 'rgba(255, 255, 0, 0.1)'
                            })
                        })],
                        'Polygon': [new ol.style.Style({
                            stroke: new ol.style.Stroke({
                                color: 'blue',
                                lineDash: [4],
                                width: 3
                            }),
                            fill: new ol.style.Fill({
                                color: 'rgba(0, 0, 255, 0.1)'
                            })
                        })],
                        'GeometryCollection': [new ol.style.Style({
                            stroke: new ol.style.Stroke({
                                color: 'magenta',
                                width: 2
                            }),
                            fill: new ol.style.Fill({
                                color: 'magenta'
                            }),
                            image: new ol.style.Circle({
                                radius: 10,
                                fill: null,
                                stroke: new ol.style.Stroke({
                                    color: 'magenta'
                                })
                            })
                        })],
                        'Circle': [new ol.style.Style({
                            stroke: new ol.style.Stroke({
                                color: 'red',
                                width: 2
                            }),
                            fill: new ol.style.Fill({
                                color: 'rgba(255,0,0,0.2)'
                            })
                        })]
                    };

                    var styleFunction = function (feature, resolution) {
                        var type = resolution < 5000 ? feature.getGeometry().getType() : '';
                        return styles[type];
                    };

                    var vectorSource = new ol.source.GeoJSON({
                        projection: 'EPSG:3857',
                        url: jsonFile
                    });

                    var jsonVector = new ol.layer.Vector({
                        source: vectorSource,
                        style: styleFunction
                    });

                    openmap.addLayer(jsonVector);

                    initialLayerGroup();
                };

                function bindInputs(layerid, layer) {
                    new ol.dom.Input($(layerid + ' .visible')[0])
                        .bindTo('checked', layer, 'visible');
                    $.each(['opacity', 'hue', 'saturation', 'contrast', 'brightness'],
                        function (i, v) {
                            new ol.dom.Input($(layerid + ' .' + v)[0])
                                .bindTo('value', layer, v)
                                .transform(parseFloat, String);
                        }
                    );
                }

                function initialLayerGroup() {
                    var layernames = openmap.getLayers();

                    //openmap.getLayers().forEach(function (layer, i) {

                    //    layernames = layernames + layer.name;

                        //bindInputs('#layer' + i, layer);
                        //if (layer instanceof ol.layer.Group) {
                        //    layer.getLayers().forEach(function (sublayer, j) {
                        //        bindInputs('#layer' + i + j, sublayer);
                        //    });
                        //}
                    //});

                    document.getElementById('layersgroup').innerHTML = layernames;
                    //$('#layertree li > span').click(function () {
                    //    $(this).siblings('fieldset').toggle();
                    //}).siblings('fieldset').hide();
                };

                function drawPoints(json) {

                    var count = json.length;

                    var iconFeatures = new Array(count);

                    $.each(json, function (idx, item) {

                        var iconFeature = new ol.Feature({
                            geometry: new ol.geom.Point(ol.proj.transform([Number(item.x), Number(item.y)], 'EPSG:4326', 'EPSG:3857')),
                            name: item.value,
                            year: item.year,
                            month: item.month
                        });

                        iconFeatures[idx] = iconFeature;
                    });

                    var vectorSource = new ol.source.Vector({
                        features: iconFeatures
                    });

                    var styleCache = {};
                    var vectorLayer = new ol.layer.Vector({
                        source: vectorSource,
                        style: function (feature, resolution) {
                            var text = resolution < 5000 ? feature.get('name') : '';

                            if (!styleCache[text]) {
                                styleCache[text] = [
                                    new ol.style.Style({
                                        image: new ol.style.Icon( /** @type {olx.style.IconOptions} */({
                                            anchor: [0.5, 46],
                                            anchorXUnits: 'fraction',
                                            anchorYUnits: 'pixels',
                                            opacity: 0.75,
                                            src: 'Images/weather.png'
                                        }))
                                    })
                                ];
                            }
                            return styleCache[text];
                        }
                    });

                    openmap.addLayer(vectorLayer);


                    ////高亮显示
                    //var highlightStyleCache = {};

                    //var featureOverlay = new ol.FeatureOverlay({
                    //    map: openmap,
                    //    style: function (feature, resolution) {
                    //        var text = resolution < 5000 ? feature.get('name') : '';
                    //        if (!highlightStyleCache[text]) {
                    //            highlightStyleCache[text] = [new ol.style.Style({
                    //                stroke: new ol.style.Stroke({
                    //                    color: '#f00',
                    //                    width: 1
                    //                }),
                    //                fill: new ol.style.Fill({
                    //                    color: 'rgba(255,0,0,0.1)'
                    //                })
                    //                //,
                    //                //text: new ol.style.Text({
                    //                //    font: '12px Calibri,sans-serif',
                    //                //    text: text,
                    //                //    fill: new ol.style.Fill({
                    //                //        color: '#000'
                    //                //    }),
                    //                //    stroke: new ol.style.Stroke({
                    //                //        color: '#f00',
                    //                //        width: 3
                    //                //    })
                    //                //})
                    //            })];
                    //        }
                    //        return highlightStyleCache[text];
                    //    }
                    //});

                    //var highlight;
                    //var displayFeatureInfo = function (pixel) {

                    //    var feature = openmap.forEachFeatureAtPixel(pixel, function (feature, layer) {
                    //        return feature;
                    //    });

                    //    var info = document.getElementById('info');
                    //    if (feature) {
                    //        info.innerHTML = feature.get('year')+ '-'+ feature.get('month') + ': ' + feature.get('name');
                    //    } else {
                    //        info.innerHTML = '&nbsp;';
                    //    }

                    //    if (feature !== highlight) {
                    //        if (highlight) {
                    //            featureOverlay.removeFeature(highlight);
                    //        }
                    //        if (feature) {
                    //            featureOverlay.addFeature(feature);
                    //        }
                    //        highlight = feature;
                    //    }
                    //};

                    //$(openmap.getViewport()).on('mousemove', function (evt) {
                    //    var pixel = openmap.getEventPixel(evt.originalEvent);
                    //    displayFeatureInfo(pixel);
                    //});

                    //openmap.on('click', function (evt) {
                    //    displayFeatureInfo(evt.pixel);
                    //});
                };

                return {
                    showMap: showMap,
                    createMap: createMap,
                    collapseMap: collapseMap,
                    resizeMap: resizeMap,
                    drawPoints: drawPoints,
                    drawGeoJsonLayer: drawGeoJsonLayer,
                    initialLayerGroup: initialLayerGroup
                };

            })();

            var openTreeView = (function () {
                function nodeClick(s, e) {
                    var year = e.node.name;

                    var json = getJsonData("Select x,y,year,month,value from webTest.Test where year = " + year);

                    if (typeof json === "undefined") return;

                    alert(year);

                    openLayermap.drawPoints(json);

                };
                return {
                    nodeClick: nodeClick
                };
            })();
            // ]]>
        </script>
    </head>
<body onload="initSql()">
    <form id="form1" runat="server">
        <asp:ScriptManager ID="ScriptManager1" runat="server">
        </asp:ScriptManager>
        <asp:UpdatePanel ID="UpdatePanel1" runat="server">
            <ContentTemplate>
                <dx:ASPxPopupControl ID="PopupTree" runat="server" Width="200px" Height="200px"
                                     ShowPinButton="True" ShowRefreshButton="True" ShowCollapseButton="True" ShowMaximizeButton="True"
                                     ClientInstanceName="popupTree" PopupElementID="btnShowTree" ShowOnPageLoad="False"
                                     PopupVerticalAlign="TopSides" PopupHorizontalAlign="LeftSides"
                                     AllowDragging="True" AllowResize="false" CloseAction="CloseButton"
                                     ScrollBars="None" HeaderText="树形图" ShowFooter="true" FooterText="" PopupAnimationType="Fade">
                    <ContentStyle Paddings-Padding="0">
                        <paddings padding="0px" /></ContentStyle>
                    <ContentCollection>
                        <dx:PopupControlContentControl>
                            <div>
                                <dx:ASPxTreeView ID="treeView" runat="server" EnableClientSideAPI="True" AllowSelectNode="True" AutoPostBack="True" ClientInstanceName="treeView">
                                    <ClientSideEvents  NodeClick="openTreeView.nodeClick"></ClientSideEvents>
                                    <Nodes>
                                        <dx:TreeViewNode Name="5" Text="5">
                                        </dx:TreeViewNode>
                                        <dx:TreeViewNode Name="4" Text="4">
                                        </dx:TreeViewNode>
                                        <dx:TreeViewNode Name="3" Text="3">
                                        </dx:TreeViewNode>
                                        <dx:TreeViewNode Name="2" Text="2">
                                        </dx:TreeViewNode>
                                        <dx:TreeViewNode Name="1" Text="1">
                                        </dx:TreeViewNode>
                                    </Nodes>
                                </dx:ASPxTreeView>
                            </div>
                        </dx:PopupControlContentControl>
                    </ContentCollection>
                </dx:ASPxPopupControl>

                <dx:ASPxPopupControl ID="PopupChart" runat="server" Width="400px" Height="400px"
                                     ShowPinButton="True" ShowRefreshButton="True" ShowCollapseButton="True" ShowMaximizeButton="True"
                                     ClientInstanceName="popupChart" PopupElementID="btnShowChart" ShowOnPageLoad="False"
                                     PopupVerticalAlign="TopSides" PopupHorizontalAlign="LeftSides"
                                     AllowDragging="True" AllowResize="false" CloseAction="CloseButton"
                                     ScrollBars="None" HeaderText="图表" ShowFooter="true" FooterText="" PopupAnimationType="Fade">
                    <ContentStyle Paddings-Padding="0">
                    </ContentStyle>
                    <ContentCollection>
                        <dx:PopupControlContentControl>
                            <dxchartsui:WebChartControl ID="webChart" runat="server" CrosshairEnabled="True" Height="400px" Width="400px">
                                <seriesserializable>
                                    <dxcharts:Series Name="Series1">
                                        <ViewSerializable>
                                            <dxcharts:SideBySideBarSeriesView Color="DodgerBlue">
                                                <FillStyle FillMode="Gradient">
                                                    <OptionsSerializable>
                                                        <dxcharts:RectangleGradientFillOptions GradientMode="RightToLeft" Color2="199, 233, 245"></dxcharts:RectangleGradientFillOptions>
                                                    </OptionsSerializable>
                                                </FillStyle>
                                            </dxcharts:SideBySideBarSeriesView>
                                        </ViewSerializable>
                                        <LabelSerializable>
                                            <dxcharts:SideBySideBarSeriesLabel TextPattern="{V:F1}">
                                            </dxcharts:SideBySideBarSeriesLabel>
                                        </LabelSerializable>
                                    </dxcharts:Series>
                                </SeriesSerializable>
                                <legend visible="False"></Legend>
                                <borderoptions visibility="False" />
                                <diagramserializable>
                                    <dxcharts:XYDiagram>
                                        <AxisX Title-Text="时间" VisibleInPanesSerializable="-1">

                                        </AxisX>
                                        <AxisY Title-Text="总额" VisibleInPanesSerializable="-1" Interlaced="True">

                                        </AxisY>
                                    </dxcharts:XYDiagram>
                                </DiagramSerializable>
                                <titles>
                                    <dxcharts:ChartTitle Text="第一季度数据" />
                                </Titles>
                            </dxchartsui:WebChartControl>
                        </dx:PopupControlContentControl>
                    </ContentCollection>
                </dx:ASPxPopupControl>
                <input id="btnShowMap"  type="button"
                       style="width: 113px" value="ShowMap"></input>
                
                <input id="btnAddCell"  type="button"
                       style="width: 113px" value="Cell" onclick="openLayermap.drawGeoJsonLayer()"></input>

                <input id="btnShowTree"  type="button"
                       style="width: 113px" value="ShowThree"></input>

                <input id="btnShowChart"  type="button"
                       style="width: 113px" value="ShowChart"></input>
                

            </ContentTemplate>
        </asp:UpdatePanel>

        <dx:ASPxPopupControl ID="PopupMap" runat="server" Width="400px" Height="400px"
                             ShowPinButton="True" ShowRefreshButton="True" ShowCollapseButton="True" ShowMaximizeButton="True"
                             ClientInstanceName="popupMap" PopupElementID="btnShowMap" ShowOnPageLoad="False" ShowSizeGrip="True"
                             PopupVerticalAlign="TopSides" PopupHorizontalAlign="LeftSides"
                             AllowDragging="True" AllowResize="True" CloseAction="CloseButton" HeaderText="地图" ShowFooter="True" FooterText="" PopupAnimationType="Fade">
            <ContentStyle Paddings-Padding="0">
            </ContentStyle>
            <ClientSideEvents Shown="openLayermap.showMap" EndCallback="openLayermap.createMap"
                              BeforeResizing="openLayermap.collapseMap" Resize="openLayermap.resizeMap" AfterResizing="openLayermap.resizeMap"></ClientSideEvents>
            <ContentCollection>
                <dx:PopupControlContentControl>
                    <div id="googlemap"  class="map">
                        <div id="popup" class="ol-popup">
                            <a href="#" id="popup-closer" class="ol-popup-closer"></a>
                            <div id="popup-content"></div>
                        </div>
                    </div>
                </dx:PopupControlContentControl>
            </ContentCollection>
        </dx:ASPxPopupControl>

    </form>

</body>
</html>
